<template>
  <div class="menuinfo">
    <div class="title">菜单信息</div>
    <div class="title">
      <el-button type="primary" size="small"
      @click="dialogVisible=true" :disabled="treevalue.summary === false">新 增</el-button>
      <el-button type="primary" size="small"
      @click="$refs.MenuItemrefs.dialogVisible=true" :disabled="treevalue.summary === false">新增菜单项</el-button>
      <el-button type="primary" size="small" 
      @click="put" :disabled="treevalue.itemId?false:true">编 辑</el-button>
      <el-button type="danger" size="small" 
      @click="dele"
      :disabled="treevalue.itemId?false:true">删 除</el-button>
    </div>
    <div class="menubody">
      <el-tree
        :data="menulist" 
        :props="props"
        :load="loadNode"
        :highlight-current="true"
        lazy
        node-key="itemId"
        ref="tree"
        @node-click="handleNodeClick"
      >
        <template slot-scope="{ node, data }">
          <span style="font-size: 14px; color: #606266">
            <i style="width:12px;height:12px;" v-if="data.summary" class="iconfont icon-caidan1"></i>
            <i style="width:12px;height:12px;" v-else class="iconfont icon-caidan3"></i>
            {{ node.label }}
          </span>
        </template>
      </el-tree>
    </div>
    <MenuItem @additem="setjubu" :treevalue="treevalue" :tablerow="tablerow" ref="MenuItemrefs"></MenuItem>
    <el-dialog :title="isupdate?'菜单目录编辑':'菜单目录新增'" :visible.sync="dialogVisible" width="35%" @close="quxiao">
        <div>
          <el-form ref="form" :rules="rules" :model="formdata" label-width="80px" label-position="left">
              <el-row :gutter="20">
                  <el-col :span="24">
                    <el-form-item label="上级菜单">
                      <el-input disabled size="small" v-model="formdata.menuname"></el-input>
                    </el-form-item>
                  </el-col>
              </el-row>
              <el-row :gutter="20">
                  <el-col :span="24">
                    <el-form-item label="菜单名称" prop="itemName">
                      <el-input size="small" v-model="formdata.itemName"></el-input>
                    </el-form-item>
                  </el-col>
              </el-row>
              <el-row :gutter="20" v-if="!treevalue.summary">
                  <el-col :span="24">
                    <el-form-item label="功能项">
                      <div class="formitem"><div class="name">{{ formdata.itemName }}</div> </div>
                    </el-form-item>
                  </el-col>
              </el-row>
              <el-row :gutter="20">
                  <el-col :span="24">
                    <el-form-item label="菜单描述">
                      <el-input  type="textarea" v-model="formdata.itemExplain"></el-input>
                    </el-form-item>
                  </el-col>
              </el-row>
              <el-row :gutter="20">
                  <el-col :span="24">
                    <el-form-item label="菜单图标">
                      <el-input size="small" v-model="formdata.itemIcon"></el-input>
                    </el-form-item>
                  </el-col>
              </el-row>
              <el-row :gutter="20">
                  <el-col :span="24">
                    <el-form-item label="排序号">
                      <el-input size="small" v-model="formdata.itemOrder"></el-input>
                    </el-form-item>
                  </el-col>
              </el-row>
          </el-form>
        </div>
        <div slot="footer">
            <el-button size="small" type="primary" @click="sure">确 定</el-button>
            <el-button size="small" @click="quxiao">取 消</el-button>
        </div>
    </el-dialog>
  </div>
</template>
<script>
import MenuItem from './MenuItem'
import {getMenuItemListapi,getitemlistapi,getalltreeapi,postaddtreeapi,postputtreeapi,postdeletetreeapi} from '@/api/system/menu-manage'
export default {
  name: 'CallPoliceMenuInfo',
  props:{
    tablerow: {
      type:Object,
      default:()=>{}
    }
  },
  components:{
    MenuItem
  },
  data() {
    return {
      level:0,
      formdata:{},
      menulist:[],
      treevalue:{},
      fanth:{},
      dialogVisible:false,
      props:{
        label:'itemName',
        children: 'children',
        isLeaf:'isLeaf'
      },
      isupdate:false,
      rules:{
        itemName:[{ required: true, message: '请输入菜单名称', trigger: 'blur' }]
      },
      node: {}
    };
  },

  async mounted() {

  },
// parentId
  methods: {
    async sure(){
        this.isupdate?postputtreeapi(this.formdata).then(res=>{
          if(this.level==1){
            this.treevalue={}
            this.setjubu(res,'修改',false)
            this.quxiao()
          }else{
            this.setjubu(res,'修改',false)
            this.quxiao()
            this.treevalue={...res.data.entity}
          }
        }):postaddtreeapi(this.formdata).then(res=>{
          this.setjubu(res,'新增',true)
          this.quxiao()
          this.$refs.tree.setCurrentKey(this.treevalue.itemId)
        })
    },
    // 获取菜单列表
    async getmenulist(val){
      const { data: { list } } = await getMenuItemListapi({ parentId: val.menuId })
      this.menulist = list.map(ele=>{
          return {
            ...ele,
            isLeaf:!ele.summary
          }
      })
    },
    // 修改
    put(){
      this.formdata = { ...this.treevalue }
      const menuname=this.node.parent.data.itemName?this.node.parent.data.itemName:this.formdata.itemName
      this.$nextTick(()=>this.$set(this.formdata,'menuname',menuname))
      this.dialogVisible=this.isupdate=true
    },
    // 树节点点击
    handleNodeClick(val,node,row){
       this.node=node
       this.level=node.level
       this.fanth=node.parent.data
       this.treevalue=val
    },
    quxiao(){
      this.$refs.form.resetFields()
      this.formdata={menuname:''}
      this.dialogVisible =this.isupdate= false
    },
    async loadNode(node, resolve){
      this.node=node
      this.level=node.level
      if(node.level >= 1){
        const {data:{list}}=await getitemlistapi({parentId:node.data.itemId})
        const array=list.map(ele=>{
          return {
            ...ele,
            isLeaf:!ele.summary
          }
        })
        resolve(array)
        return this.$refs.tree.setCurrentKey(this.treevalue.itemId)
      }
    },
    setjubu(res,name,flag){
      this.$message({
            type: res.code == '200' ? 'success' : 'waraing',
            message:res.code=='200'?`${name}成功`:res.message
      })
      if(!this.treevalue.parentId){
            this.getmenulist(this.tablerow)
      }else{
        if(flag){
            this.node.loaded = false
            this.node.expand()
        }else {
           this.node.parent.loaded = false
           this.node.parent.expand()
        }
      }
    },
    dele(){
      this.$confirm('此操作将删除该菜单, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(async () => {
          postdeletetreeapi(this.treevalue.itemId).then(res => {
            if(this.level==1){
              this.treevalue={}
              this.setjubu(res,'删除',false)
            }else{
              this.setjubu(res,'删除',false)
            }
          }) 
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
    }
  },
  watch:{
    dialogVisible(val){
      if(val){
        const menuname=!this.treevalue.parentId?'':this.treevalue.itemName
        const parentId=!this.treevalue.parentId?this.tablerow.menuId:this.treevalue.itemId
        this.$set(this.formdata,'menuname',menuname)
        this.$set(this.formdata,'parentId',parentId)
      }
    }
  }
};
</script>
<style scoped lang="scss">
.menuinfo{
  height:100%;
}
.title{
 font-size:18px;
 font-weight:bold;
 color:#000;
 margin-bottom: 10px;
}
.menubody{
  height: calc(100% - 70px);
  overflow-y:auto;
}
.formitem{
  height:32px;
  border-radius: 4px;
  display: flex;
  align-items: center;
  padding: 0px 11px;
  border: 1px solid #DCDFE6;
  font-size: 14px;
  margin-top: 4px;
  background-color: #f5f7fa;
  cursor: not-allowed;
  color:#c0c4cc;
  .name{
    display: table;
    height: 24px;
    padding: 0 4px;
    line-height: 24px;
    border: 1px solid #DCDFE6;
    border-radius: 4px;
  }
}
::v-deep .el-tree-node__content {
  &:hover {
    background-color:#a0cfff;
  }
}
::v-deep(.el-tree--highlight-current .el-tree-node.is-current > .el-tree-node__content) {
  background-color: #a0cfff;
}

::v-deep(.el-tree-node:focus > .el-tree-node__content) {
  background-color: #a0cfff;
}
::v-deep .el-tree{
  color:'#000';
}
</style>